<template>
    <DialogBox :title="props.title" :dialogVisible="props.dialogVisible" @close="handleClose">
        <div class="application-list-container application-list-container-chat">
            <!-- 列表start --->
            <PageEmpty v-if="!list.length" :type="'2'" />
            <el-row :gutter="20">
                <el-col
                    :xs="24"
                    :sm="12"
                    :md="8"
                    :lg="8"
                    :xl="8"
                    v-for="(item, index) in list"
                    :key="index"
                    class="mb-20"
                >
                    <div :class="[ `${urlAgentId}`=== `${item.id}` ? 'active-agent' : '']">
                        <CardBoxAgent
                            :title="item.name"
                            :description="item.applicationDesc"
                            @click="jumpToChat(item)"
                            :avatar="item.imgUrl"
                            :tyType="item.tyType"
                            :createdByName="item.createdBy"
                        />
                    </div>
                </el-col>
            </el-row>
            <!-- 列表end --->
       </div>
    </DialogBox>
</template>

<script setup lang="ts">
import { useRoute  } from 'vue-router'
const route = useRoute()
const urlAgentId = route.query.agentId as string | undefined

defineOptions({ name: 'AgnetList' })
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    list: {
        type: Array as () => any[],
        default: () => []
    },
    title: {
        type: String,
        default: '选择助理'
    }
})

const emit = defineEmits<{
    (e: 'tab-click', item: any): void;
    (e: 'tab-close'): void;
}>()

function jumpToChat(item: any) {
    emit('tab-click', {
      ...item,
    })
}

function handleClose(){
    emit('tab-close')
}

</script>

<style lang="scss" scoped>
.application-list-container-chat{
  min-height: 60vh;
  position: relative;
}

.active-agent{
    :deep(.card-box) {
        background-color: #F4F8FF;
    }
}
</style>
